<template>

    <div id="id">

      <top></top>
      <Navigation></Navigation>

          <br>
          <div class="cardbox">
              <div class="cardbox_mid" style="width: 50%;margin: auto;border-radius:10px; padding: 30px;background-color: #fff;margin-bottom: 100px;">
                

                <div class="title" style="width:100%;margin-top: 30px;">
                    <template>
                        <div>
                            <transition name="el-zoom-in-bottom">
                              <div v-show="show2">
                                <template>
                           
                                    <div class="titlt_box" style="width:30%;margin: auto;">
                                        <span style="color: rgb(153, 148, 148);">待支付</span><span style="font-size: 28px;color: #2ff30c;">￥{{this.tableData.tbl_order_money}}元</span>
                                      </div>

                                    <div class="sp_box" style="width:80%;margin: auto;margin-top: 30px;margin-bottom: 10px;text-align: center;"> <span style="font-size: 18px;">{{this.tableData.tb_spname}} </span></div>

                                    <div class="sp_box" style="width:80%;margin: auto;margin-top: 30px;margin-bottom: 10px;">
                                        <span style="font-size: 14px;margin-left: 80px;color: rgb(114, 113, 113);">订单编号: </span> <span style="font-size: 14px;color: rgb(114, 113, 113);">{{this.tableData.tb_number}}</span> 
                                    </div>
                
                                    <div class="sp_box" style="width:80%;margin: auto;margin-top: 15px;margin-bottom: 10px;">
                                        <span style="font-size: 14px;margin-left: 80px;color: rgb(114, 113, 113);">创建时间: </span> <span style="font-size: 14px;color: rgb(114, 113, 113);">{{this.tableData.tbl_order_time}}</span> 
                                    </div>
                
                                    <div class="sp_box" style="width:80%;margin: auto;margin-top: 15px;margin-bottom: 10px;">
                                        <span style="font-size: 14px;margin-left: 80px;color: rgb(114, 113, 113);">商品编号: </span> <span style="font-size: 14px;color: rgb(114, 113, 113);">{{this.tableData.tb_dity_id}}</span> 
                                    </div>
                                    <div class="sp_box" style="width:80%;margin: auto;margin-top: 15px;margin-bottom: 10px;">
                                        <span style="font-size: 14px;margin-left: 80px;color: rgb(114, 113, 113);">用户邮箱: </span> <span style="font-size: 14px;color: rgb(114, 113, 113);">{{this.tableData.tbl_order_user}}</span> 
                                    </div>
                                    
                                    <div class="sp_box" style="width:80%;margin: auto;margin-top: 15px;margin-bottom: 10px;">
                                        <span style="font-size: 14px;margin-left: 80px;color: rgb(114, 113, 113);">收货地址: </span> <span style="font-size: 14px;color: rgb(114, 113, 113);">{{this.tableData.tbl_user_address}}</span> 
                                    </div>




                                    
                                    <div class="sp_box" style="width:80%;margin: auto;margin-top: 30px;margin-bottom: 10px;">
                                        <span style="font-size: 16px;margin-left: 80px;">支付方式: </span>
                                            <template>
                                                <el-radio-group v-model="radio">
                                                  <el-radio :label="3">支付宝</el-radio>
                                                  <el-radio :label="6">微信</el-radio>
                                                  <el-radio :label="9">银行卡</el-radio>
                                                </el-radio-group>
                                              </template>
                                              
                                        </div>
                    
                    
                                        
                                        <div class="sp_box" style="width:80%;margin: auto;margin-top: 50px;margin-bottom: 10px;">
                                            <el-button type="success" plain style="width:40%;margin-left: 50px;"  @click="payshopping()">付款</el-button>
                                            <el-button  style="width:40%;">取消</el-button>
                                        </div>

                                  </template>
                              </div>
                            </transition>
                      
             
                     
                        </div>
                      </template>


                </div>
                <div class="order_xp">
                   
                </div>


        </div>

        <el-dialog
        title="请扫码完成订单!"
        :visible.sync="dialogVisible"
         width="30%"
        :before-close="handleClose"
        
        >
       
        <div class="diabox" style="width:300px;">
           <div style="margin-left: 35%;">
          <img :src="url" alt=""></div>
        <!-- <el-result icon="success" title="支付成功!" subTitle="支付成功我们尽快发货的!"> -->
        <template slot="extra">
        <el-button type="primary" size="medium"  @click="dialogVisible = false">确定</el-button>
        </template>
       </el-result>

        </div>

</el-dialog>

    </div>

</div>
</template>

<script>
    export default {

      data() {
        return {
            radio: 3,
            tableData:[],
            dialogVisible: false,
            show2: false,
            t_email:'',
            t_id:'',
            url:'',
        }
      },
      mounted:function(){
        this.loadexecution();
    },
      methods: {


        async payshopping(){


        if(this.tableData.tbl_payment_status == 1)
        {
            this.utils.success("当前订单已付款成功! 请勿重复付款!")
            this.$router.push({path: '/userOrderPage'})
            return;

        }

         const {data:res} = await this.$http.post('person/uporderPay',this.$qs.stringify({id:this.tableData.t_id}));
          if(res.success==true){
            this.dialogVisible = true;
          }

        },

        async  loadexecution(){
           
         this.show2 = true
         this.tableData=this.$route.query
         this.t_id =this.tableData.t_id 
         this.t_email =this.tableData.tbl_order_user
         this.url = "http://localhost:8070/code/qrcode?id="+this.t_id+"+&email="+ this.t_email
         console.log("页面")
         console.log(this.$route.query)
 
     

        },
    




      }
    }
  </script>

<style>
    .el-table .warning-row {
      background: oldlace;
    }
  
    .el-table .success-row {
      background: #f0f9eb;
    }

    .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;}
  </style>
  